<?php echo $header; ?>


<script src="view/javascript/gridster/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="view/javascript/gridster/custom.css">
<link rel="stylesheet" type="text/css" href="view/javascript/gridster/jquery.gridster.css">


<div class="modWrap">
	
	<?php if ($error) { ?>
		<div class="warning"><?php echo $error; ?></div>
	<?php } ?>
	<?php if ($success) { ?>
		<div class="success"><?php echo $success; ?></div>
	<?php } ?>
	<div class="alert" style="display: none;"></div>
	<div id="result" class="radius marB">Result</div>
	
	<!-- Module BackUp -->
	<div class="gray radius marB">
		<a class="btn-45 radius blue bk" href='index.php?route=module/pagebuilder/backup&token=<?php echo $token; ?>'>Settings Backup</a>
		<form action="<?php echo $restore; ?>" method="post" enctype="multipart/form-data" id="restore" class="form-btn radius">
			<table class="form">
				<tr>
					<td width=""><?php echo $entry_restore; ?></td>
					<td width=""><input type="file" name="import" /></td>
					<td width=""><input type="submit" value="Restore" class="radius btn-restore" /></td>
				</tr>
			</table>
		</form>
	</div>
	<!-- End Module BackUp -->
	
	
	<div class="gray radius marB">
		<table width="100%">
			<?php if($layouts): ?>
			<tr>
				<td class="sc">Load Layout : </td>
				<td>
					<select name="layouts" id="layouts" class="define radius" style="margin-top: 10px;" >
						<?php foreach ($layouts as $keyLayout => $valueLayout) { ?>
							<option value="<?php echo $valueLayout['layout_id']?>"><?php echo $valueLayout['name']?></option>
							<?php
						}?>
					</select>
				</td>
				<td></td>
				<td></td>
			</tr>
			<?php endif; ?>
		</table>
	</div>
	
	<button id="Enable" class="drag radius">Enable Drag & Drop Positions</button>
	<button id="Disable" class="drag radius">Enable Drag & Drop Modules</button>
	<span class="drag-text" style="color: #29bc41; font-weight: bold; line-height: 30px;">Moving Positions Activated</span>
	
	<div class="marB" style="clear: both"></div>
	
	<!-- drag drop -->
	<div class="gridster contain_positions">
		<ul class="mainUL radius"></ul>
	</div>

</div>
<div class="radius how">
	<h2>How it works ?</h2>
	<ol>
		<li>Taking backup from table setting from press settings backup.</li>
		<li>When any error happen you can return your setting from restore backup.</li>
		<li>Select you layout and the all modules in this layout will be appear in positions.</li>
		<li>Press to Enable Drag & Drop Positions When you need control drag and drop position.</li>
		<li>Press to Enable Drag & Drop Modules When you need control drag and drop modules.</li>
	</ol>
</div>




<script type="text/javascript">
var gridster;
$(function(){
	// load position in init page
	showLoader();
	$.getJSON('index.php?route=module/pagebuilder/getPositions&token=<?php echo $token; ?>',function(data){ 
		if(data!=null){
			$.each(data, function(i,value){
				gridster.add_widget('<div id="'+value.id+'" main_position="'+value.id+'" dir="'+value.name+'" >'+value.name+'<a href="#" class="remove">remove</a> <ul class="'+value.id+'_modules connectedModules"></ul></div>', value.size_x, value.size_y,value.col,value.row);
			});
			success();
		}else{
			success();
			$("#result").html("There is no position added")
		}
	});

	// remove position 
	$(".remove").live('click',function(e){
		e.preventDefault();
		showLoader();
		gridster.remove_widget($(this).parent("div"),function(){
	        var positions = gridster.serialize();
	        $.post(
	          'index.php?route=module/pagebuilder/savePositions&token=<?php echo $token; ?>',
	          {positions:positions},
	          function(data){
	          	success();
	            $("#result").html("data saved");
	          }
	        );
		});
	});

   gridster = $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [100, 55],
          resize: {
            enabled: true
          },
        serialize_params: function($w, wgd) {
        	//console.log(wgd);
            return {
                id: wgd.el[0].id,
                name: wgd.el[0].dir,
                col: wgd.col, 
                row: wgd.row,
                size_x: wgd.size_x,
                size_y: wgd.size_y
            };
        },
        draggable: {
            stop: function(event, ui) {
            		showLoader();
                    var positions = gridster.serialize();
                    $.post(
                      'index.php?route=module/pagebuilder/savePositions&token=<?php echo $token; ?>',
                      {positions:positions},
                      function(data){
                      	success();
                         $("#result").html("data saved");
                      }
                    );
                  }
        },
        resize: {
            enabled: true,
            stop: function(e, ui, $widget) {
            	showLoader();
	            var positions = gridster.serialize();
	            $.post(
	              'index.php?route=module/pagebuilder/savePositions&token=<?php echo $token; ?>',
	              {positions:positions},
	              function(data){
	              	success();
	                  $("#result").html("data saved");
	              }
	            );
            }
         }
    }).data('gridster');
 
 	// enable 
	$("#Enable").click(function(e){
		e.preventDefault();
		gridster.enable();
		$(".drag-text").html("Moving Positions Activated");
	});
	// disable 
	$("#Disable").click(function(e){
		e.preventDefault();
		gridster.disable();
		$(".drag-text").html("Moving Modules Activated");
	});

	$("#layouts").live("change",function(e){
		e.preventDefault();
		showLoader();
		var layout_id=$(this).val();
			jQuery.ajax({
				url: 'index.php?route=module/pagebuilder/drawLayout&token=<?php echo $token; ?>',
				type:'POST',
				data:{
					layout_id:layout_id
				},
				success:function(r){
					//console.log(r);
					$(".connectedModules").html("");
					var result=jQuery.parseJSON(r);
						//console.log(result);
						if(!jQuery.isEmptyObject(result)){
							//console.log(result);
							$.each(result,function(i,v){
								$("."+i+"_modules").html("");
								
								if(v.length > 0){
									$.each(v,function(k,value){
										var html ="<li class='moudles' layout_id='"+layout_id+"' position='"+i+"' sort_order='"+value.sort_order+"' group='"+value.code+"' >"+value.code+" <a href='#' class='delete'>delete</a></li>";
										$("."+i+"_modules").append(html);
									});
								}
							});
							//loop for all positions 
							$.each($(".contain_positions div"),function(i,v){
								var element=$(this).find("ul");
								element.sortable({
									  connectWith: ".connectedModules",
										update : function () {
											showLoader();
											var data=serlizeModules(element);
											var position=$(this).parents("div").attr("main_position");
												$.ajax({
														url: 'index.php?route=module/pagebuilder/updaterOrder&token=<?php echo $token; ?>',
														type: "post",
														data: {data:data,'main_position':position},
														success: function(r){
															//console.log(r);
															success();
														}
											});
										}
								});
							});
						}
						success();
					
				}
			});
	});
	// delete module 
	$(".delete").live("click",function(e){
		e.preventDefault();
		var element=$(this);
		showLoader();
			$.ajax({
					url: 'index.php?route=module/pagebuilder/deleteModule&token=<?php echo $token; ?>',
					type: "post",
					data: {
							layout_id:$(this).parent("li").attr("layout_id"),
							position:$(this).parent("li").attr("position"),
							sort_order:$(this).parent("li").attr("sort_order"),
							group:$(this).parent("li").attr("group"),
						},
					success: function(r){
						//console.log(r);
						element.parent("li").remove();
						success();
					}
			});
	});
});
function success(){
	var status="done";
	$(".alert").removeClass("busy").addClass(status).delay(800).fadeOut(800, function(){
			$(this).removeClass(status);											   
		});
}

function showLoader(){
	$(".alert").addClass("busy").fadeIn(800);;
}
	
</script>
<script>
$(function(){

});
	function serlizeModules(selector){
		var groupArray={};
		$.each(selector.find("li"),function(i,v){
			var data={};
			data['group']=$(this).attr("group");
			data['layout_id']=$(this).attr("layout_id");
			data['position']=$(this).attr("position");
			data['sort_order']=$(this).attr("sort_order");
			groupArray[i]=data;
		});
		return groupArray;
	}
//--></script> 
<?php echo $footer; ?>